<template>
      <el-dialog
    :title="title"
    :visible.sync="visible"
    width="1500px"
    custom-class="scrollable-dialog"
    :close-on-click-modal="false">

             <el-descriptions class="margin-top">
                <el-descriptions-item label="供应商">
                <label>{{items.supplierName}}</label>
                </el-descriptions-item>
                <el-descriptions-item label="类别名称">
                  <label>{{items.categoryName}}</label>
                </el-descriptions-item>
                <el-descriptions-item label="考核周期">
                  <label>{{ items.evaluationStartDate | intervalTime }} 至 {{ items.evaluationEndDate | intervalTime }}</label>
                </el-descriptions-item>
                <el-descriptions-item label="附件">
                  <div class="duo-file">
                    <label v-for="(file, index) in fileList" :key="index">
                      <template v-if="file.type == 2">
                        <el-image
                          style="width: 40px; height: 40px;margin-right: 6px"
                          :src="file.url"
                          :preview-src-list="[file.url]"
                          fit="cover"
                        ></el-image>
                      </template>
                      <template v-else>
                        <a :href="file.urls" target="_blank"
                          ><img
                            style="width: 40px; height: 40px;margin-right: 6px"
                            src="~@/assets/pdf_file.png"
                        /></a>
                      </template>
                    </label>
                  </div>
                </el-descriptions-item>
            </el-descriptions>
             <table class="custom-other-table">
                <tr>
                    <td class="tr-title f1">序号</td>
                    <td class="tr-title" colspan="2">行为描述</td>
                    <td class="tr-title f3">扣分</td>
                    <td class="tr-title f4">扣分依据</td>
                </tr>
                <tr v-for="(item,index) in list" :key="index">
                    <td align="center">{{ item.i }}</td>
                    <td class="tr-title f2" v-if="index === 0" rowspan="4">投标过程</td>
                    <td>{{item.title}}</td>
                    <td>{{ item.value }}</td>
                    <td>{{item.merkts}}</td>
                </tr>
            </table>

            <table class="custom-other-table btm10">
                <tr>
                    <td class="tr-title f1">序号</td>
                    <td class="tr-title" colspan="2">行为描述</td>
                    <td class="tr-title f3" v-for="(items,index) in projectList" :key="index" style="padding: 15px 0;">
                        <label>{{items.name}}</label>
                        <label class="line">扣分</label>
                    </td>
                    <td class="tr-title f4">扣分依据</td>
                </tr>
                <tr v-for="(item,index) in list2" :key="index">
                    <td align="center">{{ item.i }}</td>
                    <td class="tr-title f2" v-if="index === 0" rowspan="9">履约过程</td>
                    <td class="tr-title f2" v-if="index === 9">廉洁</td>
                    <td class="tr-title f2" v-if="index === 10">综合评价</td>
                    <td><div v-html="item.title"></div></td>
                    <td v-for="(items,child) in projectList" :key="child">
                      {{item[items.prop]}}
                    </td>
                    <td>
                        {{item.merkts}}
                    </td>
                </tr>
                <tr style="background:rgb(167 16 72);">
                  <td></td>
                  <td align="center" style="color:#fff;font-weight: bold;">小计</td>
                  <td></td>
                  <td v-for="(items,colIndex) in projectList" :key="colIndex" style="color:#fff;font-weight: bold;">
                    {{ items.tdScore }}
                  </td>
                  <td></td>
                </tr>
            </table>
        <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false"
        >取 消</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import moment from "moment";
import {
  getSupplierEvaluationPage,
} from "@/api/supplier_api";
import { evaluateUpperList,evaluateUpperList2,evaluateLowerList,evaluateLowerList2 } from "./config"
export default {
    data() {
        return {
            visible:false,
          title: '',
          items: {},
            fileList:[],
            list: [],
            list2: [],
            projectList:[]
        }
  },
    filters: {
    intervalTime(val) {
      if (!val) {
        return;
      }
        return moment(val).format("YYYY-MM-DD");
    },
  },
    methods: {
      async openForm(row, title) {
        this.items = row
        this.title = title
        this.fileList = []
        let param = {}
        param.id = row.id
        const regex = /#~#/;
        const { code, data } = await getSupplierEvaluationPage(param)
        if (data) {
           this.list = JSON.parse(data.processDetail) //投标过程明细
          let objs = JSON.parse(data.deductionDetails); //项目打分明细自定义及头部项目
          this.projectList = objs.projectList
          this.list2 = objs.list2
           //附件赋值
          if (regex.test(data.projectCountInfo)) {
            const parts = data.projectCountInfo.split("#~#");
            this.fileList = JSON.parse(parts[1]);
          } 
        }
        this.visible = true  
      }
    }
}
</script>
<style scoped>
.tree-box{
    display: flex;
}
.tree-data {
  border: 1px solid rgb(235, 238, 244);
  flex: 0 0 200px;
  margin-right: 20px;
}
.line-bg {
  display: flex;
  margin-bottom: 10px;
  border-bottom: 1px solid rgb(235, 238, 244);
  padding: 10px;
  align-items: center;
  justify-content: space-between;
  background: rgb(250, 250, 250);
  height: 50px;
}
.custom-other-table{
  min-height: 25px;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}
.custom-other-table tr td {
    border: 1px solid #f0f0f0;
    color: rgba(0, 0, 0, .85);
    font-weight: normal;
    font-size: 14px;
    padding: 10px;
}
.btm10{
  margin-top: 20px;
}
.line{
  display: block;
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
  margin-top: 10px;
}
.tr-title {
    background-color: #fafafa;
    text-align: center;
}

.f1{
  width: 70px;
}
.f2{
    width: 100px;
}
.f3{
  width: 150px;
}
.f4{
  width: 200px;
}
</style>